import { Radio } from 'antd';
import CustomApi, { ICustomApi } from './CustomApi';
import ModelApi, { IModelApi } from './ModelApi';

interface Props {
  type?: 'search' | 'edit';
  apiType: number;
  modelValue?: string;
  resultKeys?: string[];
  isPrimaryKey?: boolean;
  variableOptions?: string[] | {
    label: string;
    value: string;
  }[];
  customApiValue?: object;
  modelApiRef: React.RefObject<IModelApi>;
  customApiRef: React.RefObject<ICustomApi>;
  $apiType: (value: number) => void;
}

const Content = (props: Props) => {
  const { type = 'search', apiType, modelValue, resultKeys, isPrimaryKey, variableOptions, customApiValue, customApiRef, modelApiRef, $apiType } = props;
  return (
    <>
      <div className="header">
        <span className="title">接口类型</span>
        <Radio.Group
          value={apiType}
          onChange={(e) => $apiType(e.target.value)}
        >
          <Radio value={1}>接口工厂</Radio>
          <Radio value={2}>自定义</Radio>
        </Radio.Group>
      </div>
      <ModelApi
        type={type}
        value={modelValue}
        ref={modelApiRef}
        isShow={apiType === 1}
        resultKeys={resultKeys}
        isPrimaryKey={isPrimaryKey}
        variableOptions={variableOptions}
      />
      <CustomApi
        resultKeys={resultKeys}
        isPrimaryKey={isPrimaryKey}
        isShow={apiType === 2}
        value={customApiValue}
        ref={customApiRef}
      />
    </>
  )
}

export default Content;